<template>
    <div class="app_container">
        <el-card >
            <!-- <div slot="header" class="clearfix">
                <el-form :inline="true" :model="listQuery" ref="listQuery" class="demo-form-inline">
                    <el-form-item label="">
                        <el-date-picker
                            v-model="value1"
                            type="date"
                            value-format=""
                            placeholder="选择日期"
                            clearable>
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type="text" v-model="listQuery.keyword" placeholder="输入出价人ID" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type="text" v-model="listQuery.keyword" placeholder="输入拍卖嘉宾ID" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type="text" v-model="listQuery.keyword" placeholder="输入房间ID" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div> -->
            <div class="item" v-loading="listLoading">
                <el-table ref="dataList" :data="menuList" style="width:100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column prop="room_code" label="房间ID"> </el-table-column>
                    <el-table-column prop="room_name" label="房间名称"> </el-table-column>
                    <el-table-column prop="gift_name" label="竞拍礼物名称" > </el-table-column>
                    <el-table-column prop="gift_price" label="竞拍礼物价格" > </el-table-column>
                    <el-table-column prop="gift_picture" label="竞拍礼物图片" >
                        <template slot-scope="scope">
                            <el-popover placement="right" max-width="420" trigger="hover">
                                <img :src="scope.row.gift_picture" alt="" style="max-width: 200px;max-height: 200px">
                                <img slot="reference" :src="scope.row.gift_picture" alt="" style="width: 50px;">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="number" label="竞拍礼物数量" > </el-table-column>
                    <el-table-column prop="user_code" label="出价人ID"> </el-table-column>
                    <el-table-column prop="head_picture" label="出价人头像" >
                        <template slot-scope="scope">
                            <el-popover placement="right" max-width="420" trigger="hover">
                                <img :src="scope.row.head_picture" alt="" style="max-width: 200px;max-height: 200px">
                                <img slot="reference" :src="scope.row.head_picture" alt="" style="width: 50px;">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="current_cost" label="当前出价" > </el-table-column>
                    <el-table-column prop="total_cost" label="当前总价" > </el-table-column>
                    <el-table-column prop="add_time" label="时间" > </el-table-column>
                    <el-table-column prop="is_final" label="是否最终出价" >
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.is_final === 1" type="success">是</el-tag>
                            <el-tag v-if="scope.row.is_final === 0" type="danger">否</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <cus-pagination
                    :total="total"
                    :page.sync="listQuery.page"
                    :limit.sync="listQuery.perPage"
                    @pagination="getList"
                />
            </div>
        </el-card>

    </div>
</template>

<script>
import {
    listData,
} from "@/api/auctionRoom/auctionRecord"

export default {
    data(){
        return {
            menuList:[],
            listQuery:{
                page:1,
                perPage:10,
            },
            total:0,
        }
    },
    created(){
        this.getList()
    },
    methods:{
        getList(){
            this.listLoading = true;
            let urlData = "?";
            if (this.listQuery.page) {
                urlData = urlData + `page=${this.listQuery.page}&`;
            }
            if (this.listQuery.perPage) {
                urlData = urlData + `perPage=${this.listQuery.perPage}`;
            }
            listData(urlData).then((response) => {
                /* let arr = response.data
                arr.forEach((item) => {
                    for(let key in item){
                        if(key === 'add_time'){
                            item.add_time = this.getData(item.add_time)
                        }
                    }
                })
                this.menuList = arr; */

                this.total = response.data.meta.total;
                this.menuList = response.data.list
                this.listLoading = false

            })
        },
    }
}
</script>

<style>

</style>
